<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		
		<!-- 聊天信息(6) -->
		<HeadNav :titleName="title" :topheight="navBarHeight"></HeadNav>

		<view class="main">
			<view class="chat-member">
				<view class="member-im" v-for="item in groupMembers3">
					<!-- <image src="../../static/img/demo-01.png"></image> -->
					<image :src="item.headImage"></image>
					
					<view class="line-1">{{ item.aliasName }}</view>
				</view>
				<view class="member-im more" v-if="!m_type" @click="tomore(true)">
					<view class="more_text">更多</view>
					<uni-icons type="more-filled" size="30"></uni-icons>
				</view>
				<view class="member-im more more2" v-else @click="tomore(false)">
					<view class="more_text">收起</view>
					<uni-icons type="top" size="30"></uni-icons>
				</view>
				
				<view class="member-im op-im" @click="jumpGroup(1)" v-show="isOwner">
					<image src="../../static/img/chat-18.png"></image>
					<view class="line-1">添加</view>
				</view>
				
				<view class="member-im op-im" @click="jumpGroup(2)" v-show="isOwner">
					<image src="../../static/img/chat-19.png"></image>
					<view class="line-1">移除</view>
				</view>
			</view>
			
			<view class="tabs-warp">
				<view class="tab-item" @click="jumpGroupName()" >
					<view class="tabl-name">群聊名称</view>
					<view class="tabr-slt">
						<text>{{ group.name }}</text>
						<image src="../../static/img/chat-20.png" class="more-icon"></image>
					</view>
				</view>
				
				<view class="tab-item" @click="jumpGroupEwm()">
					<view class="tabl-name" >群二维码</view>
					<view class="tabr-slt">
						<image src="../../static/img/chat-21.png" class="ewm-icon"></image>
						<image src="../../static/img/chat-20.png" class="more-icon"></image>
					</view>
				</view>
				
				<view class="tab-item">
					<view class="tabl-name">群公告</view>
					<view class="tabr-slt">
						<text>未设置</text>
						<image src="../../static/img/chat-20.png" class="more-icon"></image>
					</view>
				</view>
				
				<view class="tab-item">
					<view class="tabl-name">群管理</view>
					<view class="tabr-slt">
						<image src="../../static/img/chat-20.png" class="more-icon"></image>
					</view>
				</view>
			</view>
			
			<view class="tabs-warp">
				<view class="tab-item" @click="jumpHistory">
					<view class="tabl-name">查找聊天记录</view>
					<view class="tabr-slt">
						<image src="../../static/img/chat-20.png" class="more-icon"></image>
					</view>
				</view>
				
				<view class="tab-item">
					<view class="tabl-name">我在本群的昵称</view>
					<view class="tabr-slt">
						<text>星光</text>
						<image src="../../static/img/chat-20.png" class="more-icon"></image>
					</view>
				</view>
				
				<view class="tab-item">
					<view class="tabl-name">显示群成员名称</view>
					<view class="tabr-slt">
						<switch checked color="#50A5FF"  />
					</view>
				</view>
				
			</view>
			
			<view class="btn-footer">
				
				<!-- this.group.ownerId == this.$store.state.userStore.userInfo.id -->
				
				<!-- {{ group.ownerId }}  {{ $store.state.userStore.userInfo.id }} -->
				<view @click="onQuitGroup()" v-show="!isOwner">退出群聊 </view>
				<view @click="onDissolveGroup()" v-show="isOwner">解散群聊</view>
			</view>
		</view>

	</view>
</template>

<script>
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				groupId: '',
				group: '', // 群聊信息
				groupMembers: '', // 群聊成员
				groupMembers2: '', // 群聊成员
				groupMembers3: '', // 展示用
				m_type: false,
			}
		},
		components: {
			HeadNav
		},
		mixins: [navBarMixin],
		methods: {
			tomore(e) {
				this.m_type = e
				if(e) this.groupMembers3 = this.groupMembers
				else this.groupMembers3 = this.groupMembers2
			},
			back() {
				uni.navigateBack()
			},
			jumpGroup(type) {
				uni.navigateTo({
					url: '/pages/group/group-change?type=' + type + '&id=' + this.groupId
				})
			},
			jumpTidy(e) {
				uni.navigateTo({
					url: '/pages/chat/tidy?tidy=' + e
				})
			},
			jumpGroupName() {
				uni.navigateTo({
					url: '/pages/group/groupName?id=' + this.groupId
				})
			},
			jumpHistory() {
				uni.navigateTo({
					url: '/pages/common/historyMsg?id=' + this.groupId
				})
			},
			
			jumpGroupEwm() {
				uni.navigateTo({
					url: '/pages/chat/groupEwm'
				})
			},
			
			loadGroupInfo() {
				this.$http({
					url: `/group/find/${this.groupId}`,
					method: 'GET'
				}).then((group) => {
					this.group = group;
					// 更新聊天页面的群聊信息
					this.$store.commit("updateChatFromGroup", group);
					// 更新聊天列表的群聊信息
					this.$store.commit("updateGroup", group);
			
				});
			},
			
			loadGroupMembers() {
				this.$http({
					url: `/group/members/${this.groupId}`,
					method: "GET"
				}).then((members) => {
					this.groupMembers = members.filter(m => !m.quit);
					this.groupMembers2 = this.groupMembers.slice(0,19);
					this.groupMembers3 = this.groupMembers.slice(0,19);
				})
			},
			
			// 解散群聊
			onDissolveGroup() {
				this.$http({
					url: `/group/delete/${this.groupId}`,
					method: 'delete'
				}).then(() => {
					uni.showToast({
						title: '解散成功',
						icon: 'none'
					})
					
					this.$store.commit("removeGroup", this.groupId);
					
					setTimeout(() => {
						uni.navigateBack();
					},2000)
				}) 
			},
			
			// 退出群聊
			onQuitGroup() {
				this.$http({
					url: `/group/quit/${this.groupId}`,
					method: 'DELETE'
				}).then(() => {
					// console.log('退出成功')
					uni.showToast({
						title: '退出成功',
						icon: 'none'
					})
					
					this.$store.commit("removeGroup", this.groupId);
					
					setTimeout(() => {
						uni.navigateBack();
					},2000)
				})
			},
		},
		onLoad(options) {
			this.groupId = options.id;
			
			// 查询群聊信息
			this.loadGroupInfo(options.id);
			
			// 查询群聊成员
			this.loadGroupMembers(options.id)
		},
		computed: {
			isOwner() {
				return this.group.ownerId == this.$store.state.userStore.userInfo.id;
			},
			title() {
				return '聊天信息(' + this.groupMembers.length + ')'
			}
		},
		onHide() {
			uni.setStorageSync('blackUser','')
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;

		.back {
			image {
				width: 20rpx;
				height: 37rpx;
			}
		}

		.head {
			position: fixed;
			top: 0;
			z-index: 1;
			width: 100%;
			background: #fff;

			.head-np {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		.main {
			margin-top: 30rpx;
			padding-bottom: 100rpx;

			.chat-member {
				padding: 30rpx;
				padding-top: 10rpx;
				background: #fff;

				.member-im {
					width: 90rpx;
					display: inline-block;
					margin-left: 60rpx;
					margin-top: 20rpx;
					image {
						width: 90rpx;
						height: 90rpx;
					}

					view {
						font-size: 24rpx;
						color: #333;
						text-align: center;
						&.line-1 {
							overflow: hidden;
							text-overflow:ellipsis; 
							white-space: nowrap;
						}
						
						
					}
					&:first-child {
						margin-left: 0;
					}
					
					&:nth-child(5n + 1) {
						margin-left: 0;
					}
					
					&.op-im {
						view {
							opacity: 0;
						}
					}
				}
			}
			
			.tabs-warp {
				padding: 0 30rpx;
				padding-bottom: 30rpx;
				margin-top: 20rpx;
				background: #fff;
				.tab-item {
					display: flex;
					padding: 26rpx 0;
					border-bottom: 2rpx solid #eee;
					.tabl-name {
						color: #333;
						font-size: 28rpx;
					}
					.tabr-slt {
						display: flex;
						align-items: center;
						margin-left: auto;
						
						text {
							
							color: #999;
							font-size: 24rpx;
						}
						.ewm-icon {
							width: 40rpx;
							height: 40rpx;
						}
						
						.more-icon {
							margin-left: 20rpx;
							width: 10rpx;
							height: 20rpx;
						}
						
						// /deep/ .uni-switch-input {
						// 	height: 40rpx;
						// 	margin-right: 0;
						// 	&:before {
						// 		width: 36rpx;
						// 		height: 36rpx;
						// 	}
							
						// 	&::after {
						// 		width: 36rpx;
						// 		height: 36rpx;
						// 	}
						// 	&.uni-switch-input-checked:after {
						// 		transform: translateX(60rpx);
						// 	}
						// }
					}
				}
			}
			
			.btn-footer {
				padding: 0 100rpx;
				margin-top: 90rpx;
				view {
					line-height: 80rpx;
					text-align: center;
					color: $theme-color-a;
					border: 2rpx solid $theme-color-a;
					border-radius: 50rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}

	}
	.more {
		text-align: center;
		position: relative;
		top: -20rpx;
	}
	.more2 {
		position: relative;
		top: 0;
	}
</style>